<template>
  <div class="echarts-chart"></div>
</template>
<script>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
export default {
  name: 'EchartsChart',
  setup() {
    const chartInstance = ref(null);
    onMounted(() => {
      // 初始化echarts实例
      chartInstance.value = echarts.init(document.querySelector('.echarts-chart'));
      // 图表配置项
      const options = {
        title: {
          text: '柱状图示例'
        },
        tooltip: {},
        xAxis: {
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [150, 230, 224, 218, 135, 147, 260]
        }]
      };
      // 使用配置项渲染图表
      chartInstance.value.setOption(options);
    });
    return {
      chartInstance
    };
  }
};
</script>
<style scoped>
.echarts-chart {
  width: 100%;
  height: 400px;
}
</style>